
  <template>
  <div class="bf-commont-template">
    <!--码表管理 -客户管理 -->
    <div class="clearfix bf-top-button">
      <div class="float-l">
        <el-button @click="showAdd" type="primary">新增</el-button>
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input
            placeholder="请输入客户编号搜索内容"
            prefix-icon="el-icon-search"
            v-model="searchData"
            @keyup.enter.native="quickSearch"
          ></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <bf-table
      :data="userData"
      :setting="listSetting"
      :rowAction="rowAction"
      @editSubmit="editSubmit"
      @pageChange = "pageChange"
      ref="table"
    ></bf-table>
    <!-- 添加 -->
    <bf-table-add :editForm ='detailSetting' ref='addRosterRef' @formSubmit='addSubmit' :editRules = "addRules"></bf-table-add>
    <!-- 高级搜索 -->
    <bf-table-search :editForm ='listSetting' ref='searchRosterRef' @formSubmit='searchRosterSubmit'></bf-table-search>
    <!-- 编辑 -->
    <bf-table-edit :editForm ='editDetailSetting' ref='editRosterRef' @formSubmit='editRosterSubmit' :editRules = "addRules"></bf-table-edit>
    <!--详情-->
    <bf-table-detail ref="bfTableDetail" :editForm="detailSetting"></bf-table-detail>

  </div>
</template>

<script>
import { listSetting, detailSetting, editDetailSetting } from './table.setting.js'
import { getList, addCustomer, editCustomer, findDetail, deleteItem } from './api.js'
export default {
  data() {
    return {
      searchData: '',
      userData: {
      },
      rowAction: [
        {
          label: '查看',
          click: (item) => {
            // console.log(item.scope)
            this.findDetailById(item.scope.row.cusNo, this.$refs.bfTableDetail.show)
          }
        },
        {
          label: '编辑',
          click: (item) => {
            this.findDetailById(item.scope.row.cusNo, this.$refs.editRosterRef.show)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$refs.table.showDelete(item)
          }
        }
      ],
      listSetting: listSetting,
      detailSetting: detailSetting,
      editDetailSetting: editDetailSetting,
      addRules: {
        cusNo: [
          { required: true, message: '请输入客户编号', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' },
          { pattern: /[0-9A-Za-z_]+/, message: '输入字符只能为数字、字母或者下划线', trigger: 'blur' }
        ],
        cusName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur' }
        ],
        cusLinkman: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
        ],
        linkmanTel: [
          { min: 2, max: 11, message: '长度在 2 到 11个字符', trigger: 'blur' }
        ],
        cusArea: [
          { required: true, message: '请输入区域', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
        ],
        cusAddr: [
          { min: 2, max: 50, message: '长度在 2 到 50个字符', trigger: 'blur' }
        ],
        cusWebsite: [
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        remarks: [
          { min: 1, max: 200, message: '长度在 1 到 200个字符', trigger: 'blur' }
        ]
      },
      searchParams: { // 搜索条件
        page: 1
      }
    }
  },
  mounted: function() {
    this.searchList()
  },
  methods: {
    addSubmit(form) {
      addCustomer(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.$refs.addRosterRef.hiden()
          this.searchList()
        }
      })
    },
    searchRosterSubmit(form) {
    },
    /**
     * 编辑保存
     */
    editRosterSubmit(form) {
      editCustomer(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$refs.editRosterRef.hiden()
          this.searchList()
        }
      })
    },

    searchList() {
      const pageParams = this.searchParams
      getList(pageParams).then((response) => {
        // const data = response.data
        if (response.success) {
          this.userData = response
          this.$refs.table.hidenForm()
        }
      })
    },
    editSubmit(params, formType, formList) {
      if (formType === 'search') {
        this.searchParams.cusArea = params.cusArea
        this.searchParams.cusLinkman = params.cusLinkman
        this.searchParams.cusName = params.cusName
        this.searchList()
      } else if (formType === 'delete') {
        const cusNo = params.row.cusNo
        deleteItem(cusNo).then((response) => {
          this.searchList()
        })
      }
    },

    findDetailById(id, showCall){ // 详情
      findDetail(id).then((response) => {
        showCall(response.data)
      })
    },
    pageChange(pageObj) {
      this.searchParams.page = pageObj.page
      this.searchParams.pageSize = pageObj.pageSize
      this.searchList()
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      this.$refs.addRosterRef.show()
    },
    quickSearch() {
      this.searchParams.page = 1
      this.searchParams.cusNo = this.searchData
      this.searchList()
    }
  }
}
</script>

<style scoped>

</style>
